<template>
	<view class="circle-box">

		<view class="">
			<u-tabs :list="statusMenuLists" @click="statusMenuClick"></u-tabs>
		</view>
		<!-- 中间月份信息和坐标信息等 -->
		<view class="month-box">
			<img src="https://file.casugn.com/storecompcard//LA83I2NNhzjYb34523c866a14202f6374005a3eb3b24_1658389394846.png"
				class="month-bg" alt="">
			<view class="month-left">
				<!-- 月份选择 -->
				<view class="month-left-top" @tap="monthShow=true">
					<text class="month-num">{{monthNum}}</text>
					<text class="month-month">月</text>
					<view class="month-icon-box">
						<u-icon class="month-icon" color="#010101" name="arrow-down-fill"></u-icon>
					</view>
				</view>
				<!-- 月份活动信息 -->
				<view class="month-info">
					可参加的活动共 <text class="month-info-num">{{monthInfoNum}}</text> 条
				</view>
			</view>
			<view class="month-right">
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					<text class="month-address">{{adress}}</text>
					<img src="https://file.casugn.com/storecompcard//9XyFV0MI1esRc6cf147e5a154628efec3f5fe0b5285d_1658388985397.png"
						alt="">
				</pick-regions>

			</view>
		</view>

		<!-- 活动列表信息 -->
		<view class="active-list" v-for="(item,index) in activeList" :key="index" @click="toCircleInfo(item,index)">
			<view class="active-status" v-if="item.activeStatus==2?true:false">
				<img src="https://file.casugn.com/storecompcard//jQ4pYvhPg5eh2a90756a7200ddc2d2045c7f6413ac9c_1658388957826.png"
					alt="">
			</view>
			<!-- 待参加显示顶部时间 -->
			<view class="active-time-box" v-if="defaluteStatus==3&&item.status==1?true:false">
				{{item.startTime}}至{{item.endTime}}
			</view>
			<view class="active-head" v-if="defaluteStatus==1?true:false">
				<view class="head-img">
					<img :src="item.icon" alt="">
				</view>
				<view class="active-name-info">
					<view class="active-name">
						{{item.name}}
					</view>
					<view class="active-introduce">
						{{item.profile}}
					</view>
				</view>
			</view>
			<view class="active-title">
				标题：<text class="active-text">{{item.title}}</text>
			</view>
			<view class="active-title" v-if="defaluteStatus==1?true:false">
				时间：<text class="active-text">{{item.startTime}}至{{item.endTime}}</text>
			</view>
			<view class="active-title active-content">
				内容：<text class="active-text">{{item.content}}</text>
			</view>
			<view class="active-info-img">
				<img :src="item.image" alt="">
				<view class="active-info-mask">
					<text>已报名 {{item.signNumber}}</text>
				</view>
			</view>
			<view class="active-address">
				<view class="active-title">
					地址：<text class="active-text">{{item.address}}</text>
				</view>
				<view class="active-address-right">
					<text class="active-address-address">{{item.province}}{{item.city}}{{item.district}}</text>
					<img src="https://file.casugn.com/storecompcard//9XyFV0MI1esRc6cf147e5a154628efec3f5fe0b5285d_1658388985397.png"
						alt="">
				</view>
			</view>
		</view>

		<!-- 月份弹窗内容 -->
		<u-picker :show="monthShow" :columns="columns" @confirm="monthConfirm" @cancel="monthCancle"></u-picker>

		<!-- <u-picker :show="areaShow" mode="region" :columns="areaLists" keyName="label"></u-picker> -->
	</view>

</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {

		components: {
			pickRegions
		},
		props: ['searchTiTle', 'monthNum', 'nowMoth'],
		watch: {
			searchTiTle: {
				handler(newName, oldName) {
					console.log(newName)
					this.title = newName
					this.getAllCircleLists()
				},
				immediate: true,
				deep: true
			},
			monthNum: {
				handler(newName, oldName) {
					console.log(newName)
					this.monthNum = newName
					this.getAllCircleLists()
				},
				immediate: true,
				deep: true
			},
			nowMoth: {
				handler(newName, oldName) {
					console.log(newName)
					this.nowMoth = newName
					this.getAllCircleLists()
				},
				immediate: true,
				deep: true
			}

		},
		data() {
			return {

				region: [],
				title: '',
				province: '',
				city: '',
				district: '',
				areaShow: true,
				defaultRegion: ['山东省', '日照市', '东港区'],
				defaultRegionCode: '371102',
				nowMoth: '', //当前选择的年月

				defaluteStatus: 1, //初始状态 1-默认 2-已报名 3-待参加
				tabList: [{
						imgUrl: 'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png',
						name: '活动'
					},
					{
						imgUrl: 'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png',
						name: '商机'
					},
				],
				tabClickIndex: 0, //tab选中的index值
				statusMenuLists: [{
					name: '默认',
					id: 0,
				}, {
					name: '已报名',
					id: 1,
				}, {
					name: '待参加',
					id: 2,
				}, ],
				typeValue: 0, //0-默认 1-已报名 2-待参加
				monthNum: '6', //默认月份
				monthShow: false, //月份弹窗控制
				columns: [
					['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				],
				monthInfoNum: '', // 月份信息活动数量
				adress: '全国', //地址选择
				// 活动信息列表
				activeList: [

				]
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		onShow() {
			this.getInitDate()

		},
		// onLoad(){
		// 	this.getInitDate()
		// },
		methods: {
			// 获取选择的地区
			handleGetRegion(region) {
				console.log(region)
				this.region = region
				this.adress = region[0].name + region[1].name + region[2].name
				this.province = region[0].name
				this.city = region[1].name
				this.district = region[2].name
				this.getAllCircleLists()
			},
			// 初始化获取当前年月
			getInitDate() {
				let date = new Date().getTime()
				let newData = this.shijianc(date)
				let dateArr = newData.split('-')
				this.monthNum = dateArr[1].split('')[1]
				this.nowMoth = newData
				this.getAllCircleLists()
			},
			// 时间戳转yy-mm-dd hh-mm-ss
			shijianc(time) {
				var date = new Date(time)
				console.log("测试" + date)
				var Y = date.getFullYear() + '-'
				// + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
				// var M = date.getMonth()+1
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
				// + ':'
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
				return Y + M
			},
			// 获取默认圈子列表
			getAllCircleLists() {
				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				let data = {
					province: this.province,
					city: this.city,
					district: this.district,
					month: this.nowMoth,
					title: this.title,
					type: this.typeValue, //0-默认 1-已报名 2-待参加
					openId: openId.openid
				}
				this.$api.getAllCircleList(data).then(res => {
					console.log(res)
					if (res.success) {
						this.activeList = res.result

						if (res.result) {
							this.monthInfoNum = res.result.length
						} else {
							this.monthInfoNum = 0
						}

					}
				})
			},

			// 状态切换点击
			statusMenuClick(item) {
				console.log(item)
				this.typeValue = item.id
				this.getAllCircleLists()
				this.defaluteStatus = item.id
			},
			// 添加圈子活动
			addClick() {
				uni.navigateTo({
					url: '/pagesBusiness/circleList/addCircle'
				})
			},
			// 月份点击选择弹窗显示
			monthSelect() {
				this.monthShow = true
			},
			// 月份选择确认事件
			monthConfirm(e) {
				console.log(e);
				let date = new Date().getTime()
				let newData = this.shijianc(date)
				let dateArr = newData.split('-')
				this.monthNum = e.indexs[0] + 1
				this.monthShow = false
				this.nowMoth = dateArr[0] + '-0' + this.monthNum
				this.getAllCircleLists()
				// console.log()
			},
			// 月份选择取消时间
			monthCancle() {
				this.getInitDate()
				this.monthShow = false
			},
			// 点击进入详情页面
			toCircleInfo(item, index) {
				console.log(item, index)
				uni.setStorageSync('circleStatus', item.activeStatus)
				uni.setStorageSync('circleId', item.id)
				uni.navigateTo({
					url: '/pagesBusiness/circleList/circleListInfo'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.circle-box {
		background: #F8F9FF;
		position: relative;

		.add-cicle {
			position: fixed;
			width: 120upx;
			height: 120upx;
			text-align: center;
			background: #FFFFFF;
			box-shadow: 0upx 3upx 20upx 0upx rgba(65, 59, 243, 0.5000);
			border-radius: 50%;
			right: 30upx;
			bottom: 150upx;
			z-index: 10;

			img {
				width: 50upx;
				height: 50upx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-25upx) translateY(-25upx);
			}
		}

		.tab-box {
			display: flex;

			.tab-wrap {
				width: 178upx;
				text-align: center;
				height: 199upx;
				position: relative;

				.tab-cicle {
					margin: 0 auto;
					margin-top: 29upx;
					width: 110upx;
					height: 110upx;
					position: relative;
					text-align: center;
					border-radius: 50%;

					img {
						width: 40upx;
						height: 40upx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-20upx) translateY(-20upx);
					}
				}

				text {
					margin-top: 11upx;
					font-size: 24upx;
					font-weight: 400;
					color: #000000;
					line-height: 30upx;
				}
			}

			.tab-active {
				background: #FFFFFF;
			}

			.tab-unactive {
				background: #F8F9FF;

				img {
					width: 40upx;
					height: 40upx;
				}
			}

			.tab-acticve-cicle {
				background: #413BF3;
			}

			.tab-unacticve-cicle {
				background: transparent;
				border: 2upx solid #413BF3;

				img {
					width: 20upx;
					height: 20upx;
				}
			}
		}

		.month-box {
			height: 189upx;
			background: #FFFFFF;
			padding: 0 29upx;
			position: relative;
			display: flex;
			justify-content: space-between;
			border-top: 1upx solid #EEEEEE;
			border-bottom: 1upx solid #EEEEEE;

			.month-bg {
				width: 276upx;
				height: 189upx;
				position: absolute;
				top: 0;
				right: 64upx;
			}

			.month-left {
				.month-left-top {
					display: flex;
					align-items: flex-end;
					margin-top: 39upx;
					height: 55upx;

					.month-num {
						font-size: 80upx;
						font-family: FZKangTi-S07T;
						font-weight: 400;
						color: #010101;
						position: relative;
						top: 17upx;
					}

					.month-month {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #010101;
						margin-left: 11upx;
					}

					.month-icon-box {
						margin-left: 18upx;

						.month-icon {
							font-size: 15upx;
						}
					}

				}

				.month-info {
					margin-top: 25upx;
					font-size: 26upx;
					font-weight: 400;
					color: #666666;

					.month-info-num {
						font-size: 40upx;
						margin: 0 10upx;
						color: #413BF3;
					}
				}
			}

			.month-right {
				position: relative;
				z-index: 5;
				margin-top: 83upx;

				.month-address {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #413BF3;
					margin-right: 20upx;
				}

				img {
					width: 21upx;
					height: 24upx;
				}
			}

		}

		.active-list {
			background: #FFFFFF;
			border-bottom: 1upx solid #EEEEEE;
			padding: 41upx 30upx 47upx;
			position: relative;

			.active-status {
				position: absolute;
				width: 140upx;
				height: 130upx;
				top: 38upx;
				right: 29upx;

				img {
					width: 140upx;
					height: 130upx;
				}
			}

			.active-time-box {
				width: 690upx;
				height: 100upx;
				background: #FFFFFF;
				border: 1upx solid #413BF3;
				box-shadow: 0upx 3upx 10upx 0upx rgba(65, 59, 243, 0.1000);
				border-radius: 20upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 100upx;
				text-align: center;
				margin-bottom: 30upx;
			}

			.active-head {
				display: flex;
				letter-spacing: 3upx;

				.head-img {
					width: 72upx;
					height: 72upx;
					border-radius: 50%;

					img {
						width: 72upx;
						height: 72upx;
						margin-top: 1upx;
					}
				}

				.active-name-info {
					margin-left: 21upx;

					.active-name {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					.active-introduce {
						margin-top: 19upx;
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 400upx;
					}
				}
			}

			.active-title {
				letter-spacing: 3upx;
				margin-top: 30upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;

				.active-text {
					color: #000000;
				}
			}

			.active-content {
				line-height: 48upx;
			}

			.active-info-img {
				margin: 0 auto;
				margin-top: 30upx;
				width: 620upx;
				height: 350upx;
				border-radius: 30upx;
				position: relative;
				overflow: hidden;

				img {
					width: 620upx;
					height: 350upx;
				}

				.active-info-mask {
					position: absolute;
					width: 620upx;
					height: 70upx;
					bottom: 0;
					background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
					line-height: 70upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}

			.active-address {
				margin-top: 30upx;
				letter-spacing: 3upx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.active-address-right {
					.active-address-address {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #413BF3;
						margin-right: 20upx;
						position: relative;
						top: -2upx;
					}

					img {
						width: 21upx;
						height: 24upx;
					}
				}
			}
		}
	}
</style>
